<template>
    <div ref="iframeCnt" class="com-cnt">
        <!-- 购物车遮罩层 -->
        <div class="mask" id="gwcmask" :class="[gwcflag?'showclass':'hideclass']">
            <div class="mask_box">
                <div class="mbox_top">
                    <div class="head">
                        <img :src="goodsdetail.picture" alt="">
                    </div>
                    <div class="t-right">
                        <h5> 
                            会员价
                            <span class="qian" v-for="(pointPrice,pointIndex) in (goodsdetail.pointPrice||'').split('-')" v-show="pointIndex == tabIndex">{{pointPrice}}</span>
                            <span class="buyChi">元</span>
                        </h5>
                        <!-- <h5 style="color:#e67e22">
                            平台价
                            <span class="qian" v-for="(pricePrice,pointIndex) in (goodsdetail.price||'').split('-')" v-show="pointIndex == tabIndex">{{pricePrice}}</span>
                            <span class="buyChi">元</span>
                        </h5> -->
                        <p>{{goodsdetail.title}}</p>
                    </div>
                </div>
                <div class="mbox_bottom">
                    <p>规格</p>
                    <div>
                        <span class="bor" v-for="(spec,specIndex) in specList" @click="pointclick(specIndex)" :class="{selected:specIndex == tabIndex}">{{spec}}</span>
                    </div>
                    <div class="plussub">
                        <span class="many">数量</span>
                        <!-- <span class="sub decrease">-</span> -->
                        <input class="yzquantity1 spinner" type="text" value="1" name="demo1" id="gwcnum" :disabled="goodsdetail.classifyId == 3">
                        <!-- <span class="plus increase">+</span> -->

                        <br>
                    </div>
                </div>
                <div class="bom">
                    <button class="cancel" @click="hidemask">取消</button>
                    <button class="sure" @click="gwcadmit">确定</button>
                </div>
            </div>
        </div>
        <!-- 立即购买遮罩层 -->
        <div class="mask" id="ljgmmask" :class="[ljgmflag?'showclass':'hideclass']">
            <div class="mask_box">
                <div class="mbox_top">
                    <div class="head">
                        <img :src="goodsdetail.picture" alt="">
                    </div>
                    <div class="t-right">
                        <h5>
                            会员价：
                            <span class="qian" v-for="(pointPrice,pointIndex) in (goodsdetail.pointPrice||'').split('-')" v-show="pointIndex == tabIndex">{{pointPrice}}</span>
                            <span class="buyChi">元</span>
                        </h5>
                        <!-- <h5 style="color:#e67e22">
                            平台价：
                            <span class="qian" v-for="(pricePrice,pointIndex) in (goodsdetail.price||'').split('-')" v-show="pointIndex == tabIndex">{{pricePrice}}</span>
                            <span class="buyChi">元</span>
                        </h5> -->
                        <p>{{goodsdetail.title}}</p>
                    </div>
                </div>
                <div class="mbox_bottom">
                    <p>规格</p>
                    <div>
                        <span class="bor" v-for="(spec,specIndex) in specList" @click="pointclick(specIndex)" :class="{selected:specIndex == tabIndex}">{{spec}}</span>
                    </div>
                    <div class="plussub">
                        <span class="many">数量</span>
                        <!-- <span class="sub decrease">-</span> -->
                        <input class="yzquantity1 spinner" type="text" value="1" name="demo1" id="ljgmnum" :disabled="goodsdetail.classifyId == 3">
                        <!-- <span class="plus increase">+</span> -->

                        <br>
                    </div>
                </div>
                <div class="bom">
                    <button class="cancel" @click="hidemask">取消</button>
                    <button class="sure" @click="ljgmadmit">确定</button>
                </div>
            </div>
        </div>
        <!-- 详情 -->
        <div class="box">
            <div class="lbt">
                <img :src="goodsdetail.picture" alt="详情图">
            </div>

            <div class="parag">
                <p style="font-size: .4rem;">{{goodsdetail.title}}</p>
                <span style="color:#999;">
                    市场价
                    <s style="text-decoration:line-through;color:#999;">
                        <span style="font-size:.32rem;display:inline-block;text-decoration:line-through;">{{goodsdetail.originalPrice}}</span>
                        
                        元</s>
                </span>
                <!-- <p class="doller">
                    <span style="display:inline-block;">平台价{{(goodsdetail.price||'').split('-')[0]}}</span>
                    元</p> -->
                <span class="price_bg">
                    <span class="price"> 会员价
                        <span class="pir">{{(goodsdetail.pointPrice||'').split('-')[0]}}</span>
                    </span>
                </span>
                
            </div>

            <div class="detail">
                <p>商品详情</p>
            </div>

            <div class="detail_box" v-html="goodsdetail.introduction">

            </div>
        </div>

        <footer>
            <!-- <p class="num">
            积分：
            <span class="money">{{(goodsdetail.pointPrice||'').split('-')[0]}}</span>
        </p> -->
            <button class="buy" @click="buynow">立即购买</button>
            <button class="incar" @click="pushcar">加入购物车</button>
        </footer>
    </div>
</template>

<script>
import { domain } from '@/assets/js/config'
import axios from 'axios'
import Qs from 'qs'
import $ from 'jquery'
import { maskTips } from '@/assets/js/dom'
export default {
    name: 'jhsdetailsPage',
    data() {
        return {
            goodsdetail: {},
            gwcflag: false,
            ljgmflag: false,
            priceList: [],
            specList: [],
            tabIndex: 0,
            spec: '',
            uthenticationStatus: localStorage.getItem('uthenticationStatus')
        }
    },
    mounted() {
        var goodsid = this.$route.query.id
        var userToken = localStorage.getItem('token')
        let self = this

        axios({
            url: domain + '/xshk/f/frontCommodity/detail',
            method: 'post',
            data: Qs.stringify({ 'id': goodsid }),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        }).then(res => { self.showgoodsSucc(res) }).catch(err => { self.showgoodsFail(err) })
    },
    methods: {
        //加入购物车遮罩层
        pushcar: function () {
            let that = this
            that.gwcflag = true
        },
        //立即购买遮罩层
        buynow: function () {
            let that = this
            that.ljgmflag = true
        },
        //能否去购买
        canljgm: function(res){
            var that = this
            var ljgmnum = $('#ljgmnum').val()
            console.log(res.data)

            if(res.data.code === 145){
                if(that.uthenticationStatus == 2){
                    maskTips({ id: 'no-shiming'+new Date().getTime(), txt: '您还未进行会员认证' })
                    setTimeout(function(){
                        that.$router.push('/shiming')
                    },1000)
                }else{
                    that.toljgm(ljgmnum)
                }
            }else if(res.data.code === 144){
                that.ljgmflag = false
                maskTips({id:'has-buy',txt:res.data.message})
            }else if(res.data.code === 132){
                that.ljgmflag = false
                if(that.uthenticationStatus == 2){
                    maskTips({ id: 'no-shiming'+new Date().getTime(), txt: '您还未进行会员认证' })
                    setTimeout(function(){
                        that.$router.push('/shiming')
                    },1000)
                }else{
                    maskTips({id:'cant-buy'+new Date().getTime(),txt:res.data.message})
                    setTimeout(function(){
                        that.$router.push('/newrecharge')
                    },1000)
                }
            }
        },
        canljgmfail: function(err){
            console.log(err)
        },
        showgoodsSucc: function (res) {
            let that = this
            that.goodsdetail = res.data.data.commodity
            that.priceList = res.data.data.priceList
            that.specList = res.data.data.specList
            that.spec = that.goodsdetail.spec.split(',')[0]
        },
        showgoodsFail: function (err) {
            console.log(err)
        },
        //点击取消
        hidemask: function () {
            var that = this
            that.gwcflag = false
            that.ljgmflag = false
        },
        //加入购物车点击确定
        gwcadmit: function () {
            var that = this
            var userToken = localStorage.getItem('token')
            var gwcnum = $('#gwcnum').val()
            if (!userToken) {
                maskTips({ id: 'not-login', txt: '您还未登录' })
                that.$router.push('/login')
            }
            if(that.uthenticationStatus == 2){
                maskTips({ id: 'no-shiming'+new Date().getTime(), txt: '您还未进行会员认证' })
                setTimeout(function(){
                    that.$router.push('/shiming')
                },1000)
            }else{
                axios({
                    url: domain + '/xshk/f/frontCommodity/addShoppingCar?token=' + userToken,
                    method: 'post',
                    data: Qs.stringify({ number: gwcnum, spec: that.spec, businessId: that.goodsdetail.id }),
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                }).then(res => { that.togwc(res) }).catch(err => { that.togwcerr(err) })
            }
            
        },
        //立即购买点击确定
        ljgmadmit: function () {
            var that = this
            var userToken = localStorage.getItem('token')
            if (!userToken) {
                that.$router.push('/login')
            }
            axios({
                url: domain + '/xshk/f/frontCommodity/checkCommodityBuy?token=' + userToken,
                method: 'post',
                data: Qs.stringify({ buId: that.goodsdetail.id }),
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            }).then(res => { that.canljgm(res) }).catch(err => { that.canljgmfail(err) })
            
        },
        pointclick: function (pointIndex) {
            var that = this
            that.tabIndex = pointIndex
            that.spec = that.goodsdetail.spec.split(',')[that.tabIndex]
        },
        togwc: function (res) {
            var that = this
            console.log(res)
            if (res.data.code === 1) {
                that.gwcflag = false
                maskTips({ id: 'togwc-succ', txt: res.data.message })
            } else {
                that.gwcflag = false
                if(that.uthenticationStatus == 2){
                    maskTips({ id: 'no-shiming'+new Date().getTime(), txt: '您还未进行会员认证' })
                    setTimeout(function(){
                        that.$router.push('/shiming')
                    },1000)
                }else{
                    maskTips({ id: 'togwc-fail'+new Date().getTime(), txt: res.data.message })
                    setTimeout(function(){
                        that.$router.push('/newrecharge')
                    },1000)
                }
                
            }

        },
        togwcerr: function (err) {
            console.log(err)
        },
        toljgm: function (ljgmnum) {
            var that = this
            that.$router.push({
                path: '/orderDetail',
                query: {
                    num: ljgmnum, numbers: ljgmnum, spec: that.spec, buId: that.goodsdetail.id, source: 2
                }
            })
        },
        toljgmerr: function (err) {
            console.log(err)
        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: 100%;
}

.left {
    font-size: 0.28rem;
    position: absolute;
    left: 0.34rem;
    top: 0.36rem;
}

.title {
    font-size: 0.32rem;
    color: #333;
    line-height: 0.92rem;
}

/* 详情 */
.box {
    background: #efeff4;
    width: 100%;
    height: auto;
}

.box .lbt {
    width: 100%;
    height: 7.46rem;
}

.box .lbt img {
    width: 100%;
    height: 7.46rem;
}

.box .parag {
    width: 100%;
    padding: 0.3rem 0.26rem;
    box-sizing: border-box;
    font-size: 0.3rem;
    color: #3c3c3c;
    background: #fff;
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 0.01rem;
    height:3.36rem;
}

.box .parag .doller {
    color: #ef6759;
    font-weight: 500;
    font-size 18px
}

.box .attribute {
    width: 100%;
    height: 1rem;
    border-bottom: 1px solid #d0d0d0;
    border-top: 1px solid #d0d0d0;
    font-size: 0.3rem;
    background: #fff;
    padding: 0 0.26rem;
    box-sizing: border-box;
    line-height: 1rem;
}

.box .attr_box {
    width: 100%;
    height: auto;
    font-size: 0.24rem;
    color: #000;
    padding: 0.4rem 0.54rem;
    box-sizing: border-box;
    line-height: 0.46rem;
}

.box .detail {
    width: 100%;
    height: 1rem;
    border-bottom: 1px solid #d0d0d0;
    border-top: 1px solid #d0d0d0;
    font-size: 0.3rem;
    background: #fff;
    padding: 0 0.26rem;
    box-sizing: border-box;
    line-height: 1rem;
}

.box .detail_box {
    width: 100%;
    height: auto;
    /* height: 2.6rem; */
    font-size: 0.24rem;
    color: #000;
    padding: 0.2rem 0.2rem;
    box-sizing: border-box;
    line-height: 0.46rem;
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 0.01rem;
    float: left;
    background: #efeff4;
}

.detail_box >>> p {
    width: 100%;
}

.detail_box >>> img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

footer {
    width: 100%;
    height: 1rem;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    font-size: 0.24rem;
    background: #fff;
    border-top: 0.02rem solid #d0d0d0;
}

footer .num {
    width: 3rem;
    height: 100%;
    color: #ef6759;
    font-size: 0.3rem;
    line-height: 1rem;
    float: left;
    padding: 0 0.36rem;
    box-sizing: border-box;
}

footer button {
    float: right;
    width: 2rem;
    height: 100%;
    border: none;
    outline: none;
    color: #fff;
    width 50%
}

footer .incar {
    background: #ff5e00;
    height: 100%;
}

footer .buy {
    // font-size: .32rem;
    background: #aad114;
    height: 100%;
}

.mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    display: none;
}

.mask .mask_box {
    width: 100%;
    height: 60%;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
}

.mask .mask_box .mbox_top {
    width: 100%;
    height: 30%;
    border-bottom: 1px solid #cbcbcb;
    padding: 0.4rem 0.4rem;
    box-sizing: border-box;
    position: relative;
}

.mask .mask_box .mbox_top .head {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    top: -0.3rem;
    /* margin-right:.4rem; */
}

.mask .mask_box .mbox_top .head img {
    width: 100%;
    height: 100%;
}

.mask .mask_box .mbox_top .t-right {
    position: absolute;
    height: 100%;
    width: 5.1rem;
    right: 0;
    top: 0;
    padding: 0 .4rem;
    box-sizing: border-box;
}

.mask .mask_box .mbox_top .t-right h5 {
    font-size: 0.36rem;
    color: #ff5722;
    line-height: 0.64rem;
}
.mask .mask_box .mbox_top .t-right h5 .buyChi
    font-size 14px

.mask .mask_box .mbox_top .t-right p {
    font-size: 0.24rem;
    color: #8f8f94;
    line-height: 0.48rem;
}

.mask .mask_box .mbox_bottom {
    width: 100%;
    height: 75%;
    padding: 0 0.4rem;
    box-sizing: border-box;
}

.mask .mask_box .mbox_bottom p {
    font-size: 0.32rem;
    color: #909093;
    line-height: 0.72rem;
}

.mask .mask_box .mbox_bottom .bor {
    text-align:center;
    border: none;
    border-radius: 5px;
    margin-bottom: 0.4rem;
    float: left;
    margin-left: 10px;
    font-size: 18px;
    line-height: 30px;
    background: #999;
    width:60px;
    height:30px;
    color:#fff;
}

.mask .mask_box .mbox_bottom .plussub {
    font-size: 0.3rem;
    float: left;
    width: 100%;
    height: 0.66rem;
}

.mask .mask_box .mbox_bottom .plussub .many {
    font-size: 0.3rem;
    line-height: 0.66rem;
    color: #909093;
    display: inline-block;
    margin-right: 0.5rem;
    float: left;
}

.mask .mask_box .mbox_bottom .plussub .sub {
    width: 0.6rem;
    height: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
    float: left;
    text-align: center;
    line-height: 0.6rem;
}

.mask .mask_box .mbox_bottom .plussub .yzquantity1 {
    width: 1.96rem;
    height: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
    float: left;
    text-align: center;
}

.mask .mask_box .mbox_bottom .plussub .plus {
    width: 0.6rem;
    height: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
    float: left;
    text-align: center;
    line-height: 0.6rem;
}

.mask .mask_box .bom {
    width: 100%;
    height: 0.8rem;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99999;
}

.mask .mask_box .bom button {
    float: left;
    width: 50%;
    height: 100%;
    border: none;
    outline: none;
    color: #fff;
}

.mask .mask_box .bom .cancel {
    background: #808080;
    font-size: 0.24rem;
}

.mask .mask_box .bom .sure {
    background: #ff5722;
    font-size: 0.24rem;
}

.price_bg {
    background: url('../../assets/imgs/bq-2.png') no-repeat center;
    width: 154px;
    height: 56px;
    // background: #f90;
    display: inline-block;
    font-size: 0.24rem;
    font-family: 'Adobe Heiti Std';
    color: #fff;
    position: relative;
    right: -1rem;
    top: 40px;
}

.price_bg .price {
       position: absolute;
    left: 0.7rem;
    top: 0.26rem;
    font-size: 0.28rem;
}

.price_bg .price .pir {
    font-size: 0.4rem;
}

.showclass {
    display: block;
}

.hideclass {
    display: none;
}

.selected {
    background: #ff5722!important;
    color: #fff
}
</style>